<template>
  <div class="body">
    <div class="container">
      <!-- 导航栏 -->
      <el-row style="margin-bottom: 30px">
        <el-menu
          :default-active="operation"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-col :span="12" >
            <el-menu-item index="login">
              <span slot="title">登录</span>
            </el-menu-item>
          </el-col>
          <el-col :span="12" >
            <el-menu-item index="register">
              <span slot="title">注册</span>
            </el-menu-item>
          </el-col>
        </el-menu>
      </el-row>

      <!-- 对应form表单 -->
      <div class="content">
        <Login v-show="operation == 'login'"></Login>
        <Register v-show="operation == 'register'"></Register>
      </div>
    </div>

    <!-- 背景动画 -->
    <div class="square">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="circle">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
import Login from "./login";
import Register from "./register";
export default {
  computed: {
    operation() {
      return this.$route.params.operation;
    },
  },
  components: { Login, Register },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.replace({
        name: "registerAndLogin",
        params: {
          operation: key,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
* {
  /* 初始化 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  .body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 渐变背景 */
    background: linear-gradient(200deg, #e3c5eb, #a9c1ed);
    /* 溢出隐藏 */
    // overflow: hidden;
    .container {
      position: relative;
      z-index: 1;
      background-color: #fff;
      border-radius: 15px;
      width: 400px;
      height: 600px;
      /* 阴影 */
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

      .el-menu {
        border-radius: 15px 15px 0 0;
      }
      .el-menu-item {
        text-align: center;
        font-size: 20px;
      }
      .el-menu-item.is-active {
        /*因为菜单项的背景色是直接写在元素上的行内样式，需要添加!important提高样式的优先级，否则会被覆盖*/
        color: #409eff !important;
        border-bottom: 1px solid #409eff;
      }
      .el-menu-item:focus,
      .el-menu-item:hover {
        border-radius: 15px 15px 0 0 ;
        background-color: none;
      }
      .content {
        height: 450px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .circle,
    .square {
      ul li {
        /* 绝对定位 */
        position: absolute;
        border: 1px solid #fff;
        background-color: #fff;
        width: 30px;
        height: 30px;
        list-style: none;
        opacity: 0;
      }
    }

    .square {
      li {
        top: 40vh;
        left: 60vw;
        /* 执行动画：动画名 时长 线性的 无限次播放 */
        animation: square 10s linear infinite;
      }

      li:nth-child(2) {
        top: 80vh;
        left: 10vw;
        /* 设置动画延迟时间 */
        animation-delay: 2s;
      }

      li:nth-child(3) {
        top: 80vh;
        left: 85vw;
        animation-delay: 4s;
      }

      li:nth-child(4) {
        top: 10vh;
        left: 70vw;
        animation-delay: 6s;
      }

      li:nth-child(5) {
        top: 10vh;
        left: 10vw;
        animation-delay: 8s;
      }

      /* 定义动画 */
      @keyframes square {
        0% {
          transform: scale(0) rotateY(0deg);
          opacity: 1;
        }
        100% {
          transform: scale(5) rotateY(1000deg);
          opacity: 0;
        }
      }
    }

    .circle {
      li {
        bottom: 0;
        left: 15vw;
        /* 执行动画：动画名 时长 线性的 无限次播放 */
        animation: circle 10s linear infinite;
      }

      li:nth-child(2) {
        left: 35vw;
        /* 设置动画延迟时间 */
        animation-delay: 2s;
      }

      li:nth-child(3) {
        left: 55vw;
        animation-delay: 6s;
      }

      li:nth-child(4) {
        left: 75vw;
        animation-delay: 4s;
      }

      li:nth-child(5) {
        left: 90vw;
        animation-delay: 8s;
      }

      @keyframes circle {
        0% {
          transform: scale(0) rotate(0deg);
          opacity: 1;
          bottom: 0;
          border-radius: 0;
        }
        100% {
          transform: scale(5) rotate(1000deg);
          opacity: 0;
          bottom: 90vh;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>